<template>
  <div>
    <van-calendar
      class="calendar"
      title="日历"
      :poppable="false"
      :show-confirm="false"
      :show-mark="false"
      :style="{ height: '500px' }"
      color="#3480ff"
      :max-date="maxDate"
      row-height="50"
      :formatter="formatter"
      @select="select"
    >
      <template #title>
        你好
      </template>

      <template #footer>
        asdads
      </template>
    </van-calendar>
  </div>
</template>

<script>
import dayjs from 'dayjs'
// https://www.cnblogs.com/cjrfan/p/9154539.html
export default {
  name: 'videoIndex',
  data() {
    return {
      maxDate: new Date(dayjs().endOf('month'))
    }
  },
  methods: {
    select(day) {
      console.log(day)
    },
    formatter(day) {
      const month = day.date.getMonth() + 1
      const date = day.date.getDate()

      if (month === 12) {
        if (date === 23) {
          // day.bottomInfo = '劳动节'
          day.className = 'myday'

          this.$nextTick(() => {})
        }
      }

      // if (day.type === 'start') {
      //   day.bottomInfo = '入住'
      // } else if (day.type === 'end') {
      //   day.bottomInfo = '离店'
      // }

      return day
    }
  }
}
</script>

<style scoped lang="less">
/deep/ .myday {
  &::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: calc(50% - 8px);
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    background: orange;
  }
}
</style>
